<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="http://123.207.19.115:8888/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://123.207.19.115:8888/layui/css/layui.css">
</head>
<body>
<div class="row" id="post_add">
    <div class="col-md-1">
        <input type="hidden" th:value="${session.id}" id="uid">
    </div>
    <div class="col-md-10">
        <div class="" style="margin-top: 5px">
            <div style="padding: 5px 0; color: #ccc">
                <form class="form-inline">
                    <label for="title" style="color: black"><b>标题</b></label>
                    <input type="text" class="form-control" id="title"  placeholder="文章标题" style="width: 190px">
                    <span>create by <span th:text="${session.nickname}"></span></span>
                    <div style="margin-top: 3px"></div>
                    <label for="forum" style="color: black"><b>版块</b></label>
                    <select style="border-radius: 5px;width: 190px" id="forum" class="btn btn-default">
                        <option class="btn btn-default" value="">请选择</option>
                        <option v-for="item in forums" :value="item.id" class="btn btn-default">{{item.name}}</option>
                    </select>
                </form>
            </div>
            <div id="editor">
            </div>
            <div id="hidden" style="display: none"></div>
            <button id="btn1" type="button" class="btn btn-primary btn-xs" style="margin-top: 5px">发布</button>
            <button id="btn2" type="button" class="btn btn-danger btn-xs" style="margin-top: 5px">清空</button>
        </div>
    </div>
    <div class="col-md-1">
    </div>
</div>
<script src="http://123.207.19.115:8888/vue/vue.js"></script>
<script src="http://123.207.19.115:8888/vue/axios.js"></script>
<script src="http://123.207.19.115:8888/jquery/jquery-3.3.1.min.js"></script>
<script src="http://123.207.19.115:8888/layui/layui.js"></script>
<script src="http://123.207.19.115:8888/wangEditor/wangEditor.js"></script>
<script>
    var forum = new Vue({
        el:"#post_add",
        data:{
            forums:""
        },
        methods:{
            getForumList:function () {
                axios.get('/admin/forum/list')
                    .then(function (reponse) {
                        forum.forums = reponse.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    });
    forum.getForumList();
    var E = window.wangEditor;
    var editor =  new E('#editor');
    editor.customConfig.uploadImgServer = '/admin/upload/postimage';
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.debug = true;
    // 限制一次最多上传 1张图片
    editor.customConfig.uploadImgMaxLength = 1;
    editor.create();
    document.getElementById('btn1').addEventListener('click', function () {
        // 读取 html
        layui.use('layer', function() {
            //得到文章缩略图
            var im = '<div id="ims">'+editor.txt.html()+'</div>';
            var fid = $('#forum').val();
            var uid = $("#uid").val();
            var title = $('#title').val();
            $("#hidden").html(im);
            var href = $("#ims img:first").attr("src");
            if(title === ""){
                layer.msg("标题必填!")
            }else if(fid === "") {
                layer.msg("版块必选!")
            }else if(href === undefined){
                layer.msg("请在文本域内至少上传一张图片!")
            }else {
                $.ajax({
                    type:"POST",
                    url:"/admin/post/add/",
                    data:{"title": $('#title').val(),"content":editor.txt.html(),"uid":$("#uid").val(),"image":href,"fid":fid},
                    async:false,
                    success:function (data) {
                        if(data.code === 0){
                            layer.msg("成功!");
                            setTimeout(" location.reload()",1000);
                        }else {
                            layer.msg("失败!");
                        }

                    }
                });
            }

        });
    }, false);
    document.getElementById('btn2').addEventListener('click', function () {
        // 读取 html
        layui.use('layer', function() {
            layer.confirm('该操作会清空当前内容是否继续？', {
                btn: ['清除', '关闭']
            }, function(index, layero){
                //按钮【按钮一】的回调
                editor.txt.html("");
                layer.close(index);
            }, function(index){
                //按钮【按钮二】的回调
                layer.close(index);
            });

        });

    }, false)
</script>
</body>
</html>